<template>
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative">
      <img :src="product.image" alt="Product" class="w-full h-48 object-cover">
      <span class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
        {{ product.rating.rate }}
      </span>
    </div>
    <div class="p-4">
      <h3 class="font-semibold text-lg mb-2 line-clamp-2">{{ product.title }}</h3>
      <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ product.description }}</p>
      <div class="flex justify-between items-center">
        <span class="font-bold text-lg text-primary">¥{{ product.price.toFixed(2) }}</span>
        <button 
          class="bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded text-sm transition-colors duration-300"
          @click="addToCart(product.id)"
          :disabled="!isLoggedIn"
          :title="!isLoggedIn ? '请先注册登录宠物商城' : ''"
        >
          <i class="fas fa-shopping-cart mr-1"></i> 加入购物车
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  setup(props, { emit }) {
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')

    const addToCart = (productId) => {
      if (!isLoggedIn.value) {
        alert('请先登录！')
        return
      }
      emit('add-to-cart', productId)
    }

    return {
      addToCart,
      isLoggedIn
    }
  }
}
</script>